<template>
    <div>
        <el-row type="left">
            <el-popover
                placement='top-start'
                :title="'强电罐'"
                trigger='hover'
                :content="battery.title + ' ' + battery.subTitle">
                <el-button circle :type='battery.type' :icon='battery.icon'
                           slot='reference'></el-button>
            </el-popover>
            <label> 强电罐 </label>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'WaterLeakForce',
    data() {
        return {
            success: {
                type: 'success',
                title: '安全',
                subTitle: [],
                icon: 'el-icon-circle-check'
            },
            error: {
                type: 'danger',
                title: '断开连接',
                subTitle: [],
                icon: 'el-icon-warning'
            },
            warning: {
                type: 'warning',
                title: '正在连接',
                subTitle: [],
                icon: 'el-icon-loading'
            },
            info: {
                type: 'danger',
                title: '检测到进水',
                subTitle: [],
                icon: 'el-icon-circle-close'
            },
            battery: {
                type: '',
                title: '',
                subTitle: ''
            }
        };
    },
    mounted() {
        var time = this.getTime();
        this.battery.type = this.warning.type;
        this.battery.icon = this.warning.icon;
        this.battery.title = this.warning.title;
        this.battery.subTitle = time;
        setInterval(this.addData, 3000);
    },
    methods: {
        getTime: function() {
            var ts = arguments[0] || 0;
            var t, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 定义时间格式
            return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        },
        // 添加实时数据
        addData: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/waterLeakForce/').then((res) => {
                var time = this.getTime();
                // console.log(res.data)
                this.battery.type = res.data.type;
                this.battery.icon = res.data.icon;
                this.battery.title = res.data.title;
                this.battery.subTitle = time;
            }).catch((error)=> {
                var time = this.getTime();
                this.battery.type = this.error.type;
                this.battery.icon = this.error.icon;
                this.battery.title = this.error.title;
                this.battery.subTitle = time;
            });
        }
    }
};
</script>

<style scoped>

.el-row {
    padding: 10px;
}
</style>
